$(function () {
    var element = layui.element;
    var menuTree = new Vue({
        el: "#shopMenuTree",
        data: {
            items: []
        },
        created: function () {
            getMenuTree();
        },
        watch: {
            'items': function () {
                this.$nextTick(function () {
                    element.init();
                })
            }
        }
    });

    function getMenuTree() {
        $.getJSON("getShopMenu", function (json) {
            menuTree.items = createTree(json.body, 'id', 'parentId', 'chindren');
        })
    }

    //导航的hover效果、二级菜单等功能，需要依赖element模块
    // 侧边栏点击隐藏兄弟元素
    $('.layui-nav-item').click(function (event) {
        $(this).siblings().removeClass('layui-nav-itemed');
    });

    height = $('.layui-layout-admin .site-demo').height();
    $('.layui-layout-admin .site-demo').height(height - 100);

    if ($(window).width() < 750) {
        trun = 0;
        $('.x-slide_left').css('background-position', '0px -61px');
    } else {
        trun = 1;
    }
    $('.x-slide_left').click(function (event) {
        if (trun) {
            $('.x-side').animate({left: '-200px'}, 200).siblings('.x-main').animate({left: '0px'}, 200);
            $(this).css('background-position', '0px -61px');
            trun = 0;
        } else {
            $('.x-side').animate({left: '0px'}, 200).siblings('.x-main').animate({left: '200px'}, 200);
            $(this).css('background-position', '0px 0px');
            trun = 1;
        }
    });

    //监听导航点击
    element.on('nav(side)', function (elem) {
        title = elem.find('cite').text();
        var $a = elem.find('a');
        url = $a.attr('data-href');
        id = $a.attr('data-id');
        // alert(url);

        for (var i = 0; i < $('.x-iframe').length; i++) {
            if ($('.x-iframe').eq(i).attr('data-id') == id) {
                element.tabChange('x-tab', id);
                return;
            }
        }
        ;

        res = element.tabAdd('x-tab', {
            title: title//用于演示
            ,
            content: '<iframe frameborder="0" src="' + url + '"data-id="' + id + '" frameborder="0" scrolling="no"  class="x-iframe"></iframe>',
            id: id
        });
        element.tabChange('x-tab', id);
    });
});

